To integrate a chat bubble into your Shopify store, you'll need to modify the code. But don't panic—it's easy.

When the customer clicks on the chat bubble, he will be redirected to a Simio Chatbot

You can follow our documentation to 👉 📟 Create a Chatbot

This allows you to collect optins and launch the customer into a flow.

Here are two codes to integrate into your Shopify theme.

You can change the phrasing and CSS style if you wish.

Source code to add in theme.liquid

You need to go to the custom code of your Shopify theme and go to the theme.liquid file

<div id="whatsapp-bubble">
  <div id="whatsapp-icon-closed">
    <img
      src="https://firebasestorage.googleapis.com/v0/b/phocea-75b47.appspot.com/o/whatsapp-chat.png?alt=media&token=d101a297-8cf3-480a-88b6-60cef3f57901"
      alt="WhatsApp Closed"
    />
  </div>
  <div id="whatsapp-icon-open" style="display: none">
    <img
      src="https://firebasestorage.googleapis.com/v0/b/phocea-75b47.appspot.com/o/Compa%2FClose%20popup.svg?alt=media&token=1e36d102-415e-4db3-839c-502c50842c40&_gl=1*1m6q8vc*_ga*MjE1Njc1NTcyLjE2NzgwOTc2Nzc.*_ga_CW55HF8NVT*MTY5ODMxNDk3NC4xMTAuMS4xNjk4MzE0OTc5LjU1LjAuMA.."
      alt="WhatsApp Open"
    />
  </div>
  <div id="whatsapp-modal" style="display: none">
    <div id="modal-header">
      <img
        src="https://firebasestorage.googleapis.com/v0/b/phocea-75b47.appspot.com/o/Compa%2FDigital_Glyph_Green.svg?alt=media&token=0a3ff908-5eee-4459-ba39-8f6acb56e2d4&_gl=1*13co57p*_ga*MjE1Njc1NTcyLjE2NzgwOTc2Nzc.*_ga_CW55HF8NVT*MTY5ODMwODA3MC4xMDkuMS4xNjk4MzA4MTI5LjEuMC4w"
        alt="WhatsApp"
        id="whatsapp-logo"
      />
      <h2 id="modal-title">I'm on your website and I have some questions</h2>
    </div>
    <a
      href="INSERT CHATBOT LINK"
      target="_blank"
      class="whatsapp-button"
      >CHAT WITH US</a
    >
    <div id="modal-footer">
      <a href="https://getsimio.com" target="_blank">Powered by <b>Simio</b></a>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const whatsappBubble = document.getElementById("whatsapp-bubble");
    const whatsappModal = document.getElementById("whatsapp-modal");
    const whatsappIconClosed = document.getElementById("whatsapp-icon-closed");
    const whatsappIconOpen = document.getElementById("whatsapp-icon-open");

    whatsappBubble.addEventListener("click", function () {
      if (whatsappModal.style.display === "flex") {
        whatsappModal.style.display = "none"; // Close the modal if it's open
        whatsappIconClosed.style.display = "block"; // Show the closed icon
        whatsappIconOpen.style.display = "none"; // Hide the open icon
      } else {
        whatsappModal.style.display = "flex"; // Open the modal if it's closed
        whatsappIconClosed.style.display = "none"; // Hide the closed icon
        whatsappIconOpen.style.display = "block"; // Show the open icon
      }
    });

    whatsappModal.addEventListener("click", function (event) {
      if (event.target === whatsappModal) {
        whatsappModal.style.display = "none"; // Close the modal if it's open
        whatsappIconClosed.style.display = "block"; // Show the closed icon
        whatsappIconOpen.style.display = "none"; // Hide the open icon
      }
    });
  });
</script>

Source code to add in theme.css

You need to go to the custom code of your Shopify theme and go to the theme.liquid file

Insert at the very bottom of your Shopify theme's theme.css file.

#whatsapp-bubble {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

#whatsapp-icon-closed img {
  width: 60px; /* Adjust the size as needed */
  height: auto;
  cursor: pointer;
}
#whatsapp-icon-open img {
  width: 60px; /* Adjust the size as needed */
  height: auto;
  cursor: pointer;
}

#whatsapp-modal {
  position: absolute;
  bottom: 80px; /* Adjust the distance from the bottom as needed */
  right: 0px; /* Adjust the distance from the right as needed */
  width: 300px;
  height: 200px;
  background-color: #fff;
  padding: 10px;
  display: none;
  border-radius: 10px;
  box-shadow: 4px 4px 0px 0px #22184b;
  border: 1px solid #000000;
  flex-direction: column;
  justify-content: space-between; /* Add space between items */
  align-items: flex-start;
}

.whatsapp-button {
  display: block;
  text-align: center;
  background-color: #25d366; /* WhatsApp green color */
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  text-decoration: none;
  margin-top: 10px;
  font-weight: bold;
  width: 100%; /* Take the full width */
}

#modal-footer {
  width: 100%; /* Take the full width */
  text-align: center;
  font-size: 10px;
}

#modal-header {
  display: flex;
  align-items: top;
}

#whatsapp-logo {
  width: 45px; /* Adjust the size as needed */
  height: auto;
}

#modal-title {
  margin-left: 10px; /* Adjust the margin as needed to separate the title from the logo */
}